<template>
	<view class="city-agent">
		<view class="top">
			<view class="agent-info">
				<view class="agent-icon"></view>
				<view class="agent-name">{{agent_info.area}}</view>
				<view class="agent-ctime">{{agent_info.create_time}}加入</view>
			</view>

			<view class="stats">
				<view class="stats-item">
					<view class="stats-value">{{agent_info.total_commission}}</view>
					<view class="stats-title data-title">累积津贴</view>
				</view>
				<view class="stats-item">
					<view class="stats-value">{{agent_info.order_money}}</view>
					<view class="stats-title data-title">累计营业额(元)</view>
				</view>
				<view class="stats-item">
					<view class="stats-value">{{agent_info.order_num}}</view>
					<view class="stats-title data-title">累计订单量</view>
				</view>
			</view>
			<!-- 转换入口 -->
			<view class="withdraw">
				<view class="withdraw-amount" @click="$util.redirectTo('/plugpages/rebate/bill?role=agent')">可转换津贴<view class="withdraw-amount-value">{{agent_info.account}}</view>
				</view>
				<view class="withdraw-button" @click="$util.redirectTo('/plugpages/rebate/withdraw_apply?role=agent')">去转换</view>
			</view>
		</view>
		<view class="filter-data">
			<view class="period-head">
				<view class="filter" @click="openMonthPicker">
					<view class="filter-value">{{filterDate.year.name}}{{filterDate.month.name}}</view>
					<view class="filter-icon"></view>
				</view>
				<view class="period-title">代理区域月份交易数据</view>
			</view>
			<view class="period-stats">
				<view class="p-stats-item" v-for="(item,index) in periodStatsField" :key="index">
					<view class="p-stats-title">{{item.title}}</view>
					<view class="p-stats-value">{{periodStats[item.index]}}</view>
					<view class="p-stats-changed" :class="{green:periodStats[item.changeIndex]<0}">
						较上月{{periodStats[item.changeIndex]}}</view>
				</view>
			</view>
			<view class="agent-list">
				<view class="agent-item" v-for="(item,index) in order_data" :key="index">
					<view class="agent-head">
						<view class="agent-time">{{item.order_days}}</view>
						<!-- <view class="agent-link"  @click="$util.redirectTo('/plugpages/rebate/order?role=agent&date='+item.order_days)">查看详情</view> -->
					</view>
					<view class="agent-fields">
						<view class="agent-fields-column">
							<view class="agent-field">营业额 ¥{{item.real_goods_money}}</view>
							<view class="agent-field">预计津贴 {{item.commission}}</view>
							<view class="agent-field">退款金额 ¥{{item.refund_money}}</view>
						</view>
						<view class="agent-fields-column">
							<view class="agent-field">订单量 {{item.order_num}}</view>
							<view class="agent-field">已获津贴 {{item.settlement_commission}}</view>
						</view>
					</view>
				</view>
			</view>
			<ns-empty v-if="order_data.length == 0" text="暂无数据" :fixed="!1" :isIndex="!1"></ns-empty>
		</view>
		<diy-month-picker ref="monthPicker" @onConfirm="confirmMonth"></diy-month-picker>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyMonthPicker from '../components/diy-month-picker/diy-month-picker.vue';
	export default {
		components: {
			diyMonthPicker
		},
		data() {
			return {
				date: '',
				agent_info: {},
				periodStatsField: [{
					title: '营业额(元)',
					index: 'total_real_goods_money',
					changeIndex: 'last_month_money'
				}, {
					title: '订单量',
					index: 'total_order_num',
					changeIndex: 'last_month_order'
				}, {
					title: '退款金额(元)',
					index: 'total_refund_money',
					changeIndex: 'last_month_refund'
				}],
				periodStats: {},
				filterDate: {
					year: {},
					month: {}
				},
				order_data: []
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: '代理中心'
			})
			if (uni.getStorageSync('token')) {
				this.token = uni.getStorageSync('token');
				this.getAgentHead();
				this.getAgentOrder();
			} else {
				setTimeout(() => {
					this.$refs.login.open('/plugpages/rebate/city-agent');
				});
			}
		},
		methods: {
			getAgentHead() {
				this.$api.sendRequest({
					url: '/agent/api/agent/getAgentHead',
					data: {},
					success: res => {
						if (res.code >= 0) {
							this.agent_info = res.data;
						} else {
							this.$util.showToast({
								title: res.message
							});
							setTimeout(() => {
								this.$util.redirectTo('/pages/member/index/index',{},'tabbar');
							}, 1500);
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getAgentOrder() {
				this.$api.sendRequest({
					url: '/agent/api/agent/getAgentOrder',
					data: {date:this.date},
					success: res => {
						if (res.code >= 0) {
							this.periodStats = res.data.total;
							this.order_data = res.data.day;
						}
					}
				});
			},
			openMonthPicker() {
				this.$refs.monthPicker.show();
			},
			confirmMonth(data) {
				this.filterDate = {
					year: data[0],
					month: data[1]
				};
				this.date =  data[0]['value'] + '-' + data[1]['value'];
				this.order_data = [];
				this.getAgentOrder();	
			}
		},
		onLoad() {
			let today = new Date();
			let year = today.getFullYear();
			let month = today.getMonth();
			this.filterDate = {
				year: {
					name: `${year}年`,
					value: year
				},
				month: {
					name: `${month+1}月`,
					value: month
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../public/css/style.scss';

	.city-agent {
		padding-bottom: 80rpx;
	}

	.top {
		padding-top: 40rpx;
		position: relative;
		width: 750rpx;
		height: 430rpx;
		background: linear-gradient(134deg, #FF5A58 0%, #FF4544 100%);
		@include flex(flex-start,center,column);

		.data-title {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.75);
			line-height: 33rpx;
		}

		.agent-info {
			padding: 16rpx;
			width: 466rpx;
			min-height: 80rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			@include flex(flex-start, center);

			.agent-icon {
				@include bgm('icon-user-red.png');
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
			}

			.agent-name {
				margin-right: 12rpx;
				font-size: 34rpx;
				color: #303133;
				line-height: 48rpx;
			}

			.agent-ctime {
				font-size: 24rpx;
				color: #909399;
				line-height: 33rpx;
			}
		}

		.summary {
			@include flex(space-between, center);

			.summary-title {}

			.summary-value {
				font-size: 56rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 68rpx;
			}

			.income-detail {
				@include flex(center, center);

				.income-detail-text {
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}

				.income-detail-icon {
					width: 32rpx;
					height: 32rpx;
					@include bgm('arrow-white.png');
				}
			}
		}

		.stats {
			width: 690rpx;
			margin-top: 48rpx;
			@include flex(space-between, center);

			.stats-item {
				.stats-title {
					text-align: center;
				}

				.stats-value {
					text-align: center;
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 45rpx;
				}
			}
		}
		
		.withdraw {
			@include withdraw-box;
		}
	}
</style>
